<template>
    <div id="loginf">
        <el-form>
            <el-form-item label="账号：" label-width="60px">
                <el-input
                    class="input"
                    v-model="account"
                    @input="handleInput"
                    type="text"
                    prefix-icon="el-icon-user"
                    placeholder="请输入账号/手机号/邮箱"
                    clearable
                    v-sanitize
                ></el-input>
            </el-form-item>
            <el-form-item label="密码：" label-width="60px">
                <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" minlength="8" maxlength="30" clearable></el-input>
            </el-form-item>
            <el-form-item label="验证码：" label-width="70px">
                <el-input type="text" prefix-icon="el-icon-key" placeholder="请输入图形验证码" maxlength="4" clearable>
                    <img v-if="verifyCodeUrl.length > 0" slot="append" :src="verifyCodeUrl" alt="" @click="getVerifyCode" class="verifyCode" />
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit" class="submit-button">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            account: '',
            verifyCodeUrl: '',
        };
    },
    created() {
        this.getVerifyCode();
    },
    methods: {
        getVerifyCode() {
            const windowUrl = window.URL || window.webkitURL;
            axios({
                method: 'GET',
                url: '/api/system/getVerifyCode',
                responseType: 'blob',
            }).then(res => {
                if (res.status == 200) {
                    const blob = res.data;
                    this.verifyCodeUrl = windowUrl.createObjectURL(blob);
                }
            });
        },
        handleInput(value) {
            console.log(value);
            // console.log(DOMPurify.sanitize(value))
            // this.account = DOMPurify.sanitize(value)
        },
    },
};
</script>
<style lang="scss" scoped>
@import url('./Loginf.scss');
</style>
